window.onload = function () {


    async function topRender() {
        const res = await axios({
            url: '/dashboard'
        })
        console.log(res);
        let { groupData, overview, provinceData, salaryData, year } = res.data
        console.log(year.month);
        /* ---------------------------------------  顶部渲染  --------------------------------------- */
        for (k in overview) {
            document.querySelector(`[name=${k}]`).innerHTML = overview[k]
        }
        /* ---------------------------------------  顶部渲染  --------------------------------------- */

        /* ---------------------------------------  全学科薪资走势图  --------------------------------------- */
        function AllEcharts(year) {

            const myChart = echarts.init(document.querySelector('#line'));

            const option = {
                title: {
                    text: '2021全学科薪资走势图',
                    left: '2%',
                    top: '5%'
                },
                xAxis: {
                    type: 'category',
                    data: year.map(v => v.month),
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#d3d3d3'
                        }
                    },
                    axisLabel: {
                        color: 'black'
                    }
                },
                tooltip: {
                    show: true
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                grid: {
                    left: '10%',
                    top: '30%'
                },
                series: [
                    {
                        data: year.map(v => v.salary),
                        type: 'line',
                        smooth: true,
                        symbolSize: 10,
                        lineStyle: {
                            color: 'red',
                            width: '4'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'gold' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };
        AllEcharts(year)
        /* ---------------------------------------  全学科薪资走势图  --------------------------------------- */




        /* ---------------------------------------  班级薪资公布  --------------------------------------- */
        function publicSalayEcharts(salaryData) {
            const myChart = echarts.init(document.querySelector('#salary'));
            option = {
                title: {
                    text: '班级薪资公布',
                    left: '10',
                    top: '20'
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    bottom: '0%'
                },
                color: ['#fda224', '#36dba0', '#4f96fd', '#3fceff'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['60%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 9
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: salaryData.map(v => {
                            return {
                                name: v.label,
                                value: v.g_count + v.b_count
                            }
                        })
                    }
                ]
            };
            myChart.setOption(option);
        }
        publicSalayEcharts(salaryData)
        /* ---------------------------------------  班级薪资公布  --------------------------------------- */




        /* ---------------------------------------  班级每组薪资  --------------------------------------- */
        function groupSalayEcharts(groupData) {
            const myChart = echarts.init(document.querySelector('#lines'));
            const option = {
                xAxis: {
                    type: 'category',
                    data: groupData[1].map(v => v.name),
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#d3d3d3'
                        }
                    },
                    axisLabel: {
                        fontSize: '15',
                        color: 'red'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    show: true
                },
                color: [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#3fe8ac' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#fff' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#4da1ed' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#fff' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                ],
                series: [
                    {
                        data: groupData[1].map(v => v.hope_salary),
                        type: 'bar'
                    },
                    {
                        data: groupData[1].map(v => v.salary),
                        type: 'bar'
                    }
                ]
            };
            myChart.setOption(option);
            const btn = document.querySelectorAll('#btns button')
            btn.forEach(v => {//代表遍历
                v.onclick = function () {//代表每一个都注册了点击事件
                    btn.forEach(v => { v.classList.remove('btn-blue') })//代表为每一个清除类名
                    this.classList.add('btn-blue')//代表为当前添加类名
                    const index = this.innerHTML
                    option.xAxis.data = groupData[index].map(v => v.name)
                    option.series[0].data = groupData[index].map(v => v.hope_salary)//写了大括号就要写Return!!!不写大括号就自动return,箭头函数只有一条语句可以不写大括号!!!自动return!!!
                    option.series[1].data = groupData[index].map(v => v.salary)//写了大括号就要写Return!!!不写大括号就自动return,箭头函数只有一条语句可以不写大括号!!!自动return!!!
                    myChart.setOption(option);//重新调用这个方法就可以重新渲染
                }
            })
        }
        groupSalayEcharts(groupData)
        /* ---------------------------------------  班级每组薪资  --------------------------------------- */




        /* ---------------------------------------  男女薪资分布  --------------------------------------- */
        function boyGirlSalary(salaryData) {
            const myChart = echarts.init(document.querySelector('#gender'));
            option = {
                title: [
                    {
                        text: '男女薪资分布',
                        left: '4%',
                        top: '5%'
                    },
                    {
                        text: '男生',
                        left: '43%',
                        top: '45%'
                    },
                    {
                        text: '女生',
                        left: '43%',
                        bottom: '5%'
                    }
                ],
                grid: {
                    top: 50
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    left: 'left'
                },
                color: ['#34d39a', '#fda224', '#3abcfa', '#5097ff'],
                series: [
                    {
                        name: '女生人数',
                        type: 'pie',
                        radius: ['25%', '30%'],
                        center: ['50%', '30%'],
                        data: salaryData.map(v => {
                            return {
                                value: v.g_count,
                                name: v.label
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '男生人数',
                        type: 'pie',
                        radius: ['25%', '30%'], //第一个代表圆心大小,第二个代表半径
                        center: ['50%', '75%'], //第一个代表距离盒子左边的距离,第二个代表距离盒子上边的距离
                        data: salaryData.map(v => {
                            return {
                                value: v.b_count,
                                name: v.label
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
        boyGirlSalary(salaryData)
        /* ---------------------------------------  男女薪资分布  --------------------------------------- */




        /* ---------------------------------------  籍贯分布  --------------------------------------- */
        function map(provinceData) {
            const myEchart = echarts.init(document.querySelector('#map'))
            const dataList = [
                { name: '南海诸岛', value: 0 },
                { name: '北京', value: 0 },
                { name: '天津', value: 0 },
                { name: '上海', value: 0 },
                { name: '重庆', value: 0 },
                { name: '河北', value: 0 },
                { name: '河南', value: 0 },
                { name: '云南', value: 0 },
                { name: '辽宁', value: 0 },
                { name: '黑龙江', value: 0 },
                { name: '湖南', value: 0 },
                { name: '安徽', value: 0 },
                { name: '山东', value: 0 },
                { name: '新疆', value: 0 },
                { name: '江苏', value: 0 },
                { name: '浙江', value: 0 },
                { name: '江西', value: 0 },
                { name: '湖北', value: 0 },
                { name: '广西', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '山西', value: 0 },
                { name: '内蒙古', value: 0 },
                { name: '陕西', value: 0 },
                { name: '吉林', value: 0 },
                { name: '福建', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0 },
                { name: '青海', value: 0 },
                { name: '西藏', value: 0 },
                { name: '四川', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '海南', value: 0 },
                { name: '台湾', value: 0 },
                { name: '香港', value: 0 },
                { name: '澳门', value: 0 },
            ]
            provinceData.forEach(v => {
                dataList.forEach(item => {//这里因为不用return用任意一个有遍历功能的方法都可以套两个循环目的就是为了拿出两个数组中的每一个
                    if (v.name.indexOf(item.name) != -1) {//如果第一个字满足条件的就给上,不满足就不进入判断,注意是让value等于过去
                        item.value = v.value
                    }
                })
            })
            let option = {
                title: {
                    text: '籍贯分布',
                    top: 10,
                    left: 10,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} 位学员',
                    borderColor: 'transparent',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    textStyle: {
                        color: '#fff',
                    },
                },
                visualMap: {
                    min: 0,
                    max: 6,
                    left: 'left',
                    bottom: '20',
                    text: ['6', '0'],
                    inRange: {
                        color: ['#ffffff', '#0075F0'],
                    },
                    show: true,
                    left: 40,
                },
                geo: {
                    map: 'china',
                    roam: false,
                    zoom: 1.0,
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)',
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)',
                            color: '#e0ffff',
                        },
                        emphasis: {
                            areaColor: '#34D39A',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
                series: [
                    {
                        name: '籍贯分布',
                        type: 'map',
                        geoIndex: 0,
                        data: dataList,
                    },
                ],
            }
            myEchart.setOption(option)
        }
        map(provinceData)
        /* ---------------------------------------  籍贯分布  --------------------------------------- */

    }

    topRender()


}



